import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import LanguageSelector from './LanguageSelector';

const GlobalI18nTest = () => {
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();

  const testRoutes = [
    { path: '/login', name: 'LXT登录页面', component: 'Lgoin.jsx' },
    { path: '/logins', name: 'LYF登录页面', component: 'Logins.jsx' },
    { path: '/zhuce', name: '注册页面', component: 'zhuce.jsx' },
    { path: '/home', name: '首页', component: 'Home.jsx' },
    { path: '/houtai', name: '后台管理', component: 'Houtai.jsx' },
    { path: '/chatAi', name: 'AI聊天', component: 'ChatAi.jsx' },
    { path: '/zhibo-streamer', name: '直播推流', component: 'zhibo-streamer.jsx' }
  ];

  return (
    <div style={{ 
      padding: '40px',
      fontFamily: 'Arial, sans-serif',
      maxWidth: '1200px',
      margin: '0 auto',
      backgroundColor: '#f5f5f5',
      minHeight: '100vh'
    }}>
      {/* 页面头部 */}
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        marginBottom: '30px',
        padding: '20px',
        backgroundColor: 'white',
        borderRadius: '12px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <div>
          <h1 style={{ color: '#1890ff', margin: 0 }}>🌍 项目全局国际化测试</h1>
          <p style={{ color: '#666', marginTop: '8px', marginBottom: 0 }}>
            当前语言: <strong>{i18n.language}</strong> | 
            支持语言: 中文(zh), English(en), 日本語(ja), 한국어(ko)
          </p>
        </div>
        <LanguageSelector />
      </div>

      {/* 功能概述 */}
      <div style={{ 
        marginBottom: '30px',
        padding: '20px',
        backgroundColor: 'white',
        borderRadius: '12px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <h2 style={{ color: '#1890ff', marginBottom: '16px' }}>✅ 已完成深度国际化的功能</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '20px' }}>
          <div>
            <h3 style={{ color: '#333', marginBottom: '12px' }}>🔐 登录认证系统</h3>
            <ul style={{ marginLeft: '20px', lineHeight: '1.8' }}>
              <li>✅ LXT登录页面 (完整国际化)</li>
              <li>✅ LYF登录页面 (完整国际化)</li>
              <li>✅ 用户注册页面 (完整国际化)</li>
              <li>✅ 安全验证界面 (完整国际化)</li>
              <li>✅ 第三方登录提示</li>
              <li>✅ 表单验证错误信息</li>
            </ul>
          </div>
          <div>
            <h3 style={{ color: '#333', marginBottom: '12px' }}>🏠 核心业务页面</h3>
            <ul style={{ marginLeft: '20px', lineHeight: '1.8' }}>
              <li>✅ 首页导航菜单 (全部国际化)</li>
              <li>✅ 首页产品展示 (标题+描述)</li>
              <li>✅ 首页课程展示 (标题+描述+标签)</li>
              <li>✅ 首页抽屉菜单 (全部选项)</li>
              <li>✅ 底部标签栏 (移动端)</li>
              <li>✅ 语言选择器 (全站通用)</li>
            </ul>
          </div>
          <div>
            <h3 style={{ color: '#333', marginBottom: '12px' }}>⚙️ 管理系统</h3>
            <ul style={{ marginLeft: '20px', lineHeight: '1.8' }}>
              <li>✅ 后台管理菜单 (完整国际化)</li>
              <li>✅ 面包屑导航 (动态翻译)</li>
              <li>✅ 用户下拉菜单</li>
              <li>✅ 管理内容页面</li>
              <li>✅ 权限提示信息</li>
              <li>🔄 AI聊天助手 (部分国际化)</li>
            </ul>
          </div>
        </div>
      </div>

      {/* 翻译文本测试 */}
      <div style={{ 
        marginBottom: '30px',
        padding: '20px',
        backgroundColor: 'white',
        borderRadius: '12px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <h2 style={{ color: '#1890ff', marginBottom: '16px' }}>🧪 实时翻译测试</h2>
        
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '16px' }}>
          {/* 登录相关翻译 */}
          <div style={{ 
            padding: '16px', 
            border: '1px solid #e8e8e8', 
            borderRadius: '8px',
            backgroundColor: '#fafafa'
          }}>
            <h4 style={{ color: '#52c41a', marginBottom: '12px' }}>🔐 登录翻译</h4>
            <div style={{ fontSize: '12px', lineHeight: '1.4' }}>
              <p><strong>标题:</strong> {t('login.title')}</p>
              <p><strong>密码登录:</strong> {t('login.passwordLogin')}</p>
              <p><strong>登录按钮:</strong> {t('login.loginButton')}</p>
              <p><strong>忘记密码:</strong> {t('login.forgotPassword')}</p>
              <p><strong>立即注册:</strong> {t('login.register')}</p>
            </div>
          </div>

          {/* 主页导航翻译 */}
          <div style={{ 
            padding: '16px', 
            border: '1px solid #e8e8e8', 
            borderRadius: '8px',
            backgroundColor: '#fafafa'
          }}>
            <h4 style={{ color: '#1890ff', marginBottom: '12px' }}>🏠 主页导航</h4>
            <div style={{ fontSize: '12px', lineHeight: '1.4' }}>
              <p><strong>品牌名:</strong> {t('home.brandName')}</p>
              <p><strong>首页:</strong> {t('home.navigation.home')}</p>
              <p><strong>学习机:</strong> {t('home.navigation.learningMachine')}</p>
              <p><strong>网校:</strong> {t('home.navigation.onlineSchool')}</p>
              <p><strong>全部:</strong> {t('home.navigation.allMenu')}</p>
            </div>
          </div>

          {/* 课程相关翻译 */}
          <div style={{ 
            padding: '16px', 
            border: '1px solid #e8e8e8', 
            borderRadius: '8px',
            backgroundColor: '#fafafa'
          }}>
            <h4 style={{ color: '#fa541c', marginBottom: '12px' }}>📚 课程翻译</h4>
            <div style={{ fontSize: '12px', lineHeight: '1.4' }}>
              <p><strong>精品课臻选:</strong> {t('home.courses.premiumSelection')}</p>
              <p><strong>立即报名:</strong> {t('home.courses.enrollNow')}</p>
              <p><strong>热销:</strong> {t('home.courses.tags.hot')}</p>
              <p><strong>新课:</strong> {t('home.courses.tags.new')}</p>
              <p><strong>限时优惠:</strong> {t('home.courses.tags.discount')}</p>
            </div>
          </div>

          {/* 通用翻译 */}
          <div style={{ 
            padding: '16px', 
            border: '1px solid #e8e8e8', 
            borderRadius: '8px',
            backgroundColor: '#fafafa'
          }}>
            <h4 style={{ color: '#fa8c16', marginBottom: '12px' }}>⚙️ 通用翻译</h4>
            <div style={{ fontSize: '12px', lineHeight: '1.4' }}>
              <p><strong>确认:</strong> {t('common.confirm')}</p>
              <p><strong>取消:</strong> {t('common.cancel')}</p>
              <p><strong>保存:</strong> {t('common.save')}</p>
              <p><strong>搜索:</strong> {t('common.search')}</p>
              <p><strong>加载中:</strong> {t('common.loading')}</p>
            </div>
          </div>
        </div>
      </div>

      {/* 页面跳转测试 */}
      <div style={{ 
        marginBottom: '30px',
        padding: '20px',
        backgroundColor: 'white',
        borderRadius: '12px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <h2 style={{ color: '#1890ff', marginBottom: '16px' }}>🚀 页面跳转测试</h2>
        <p style={{ color: '#666', marginBottom: '20px' }}>
          点击下方按钮跳转到不同页面，验证语言设置是否在页面间保持同步：
        </p>
        
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px' }}>
          {testRoutes.map((route, index) => (
            <button
              key={index}
              onClick={() => navigate(route.path)}
              style={{
                padding: '12px 16px',
                backgroundColor: '#1890ff',
                color: 'white',
                border: 'none',
                borderRadius: '6px',
                cursor: 'pointer',
                fontSize: '14px',
                transition: 'all 0.3s ease',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
              }}
              onMouseEnter={(e) => {
                e.target.style.backgroundColor = '#40a9ff';
                e.target.style.transform = 'translateY(-2px)';
                e.target.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
              }}
              onMouseLeave={(e) => {
                e.target.style.backgroundColor = '#1890ff';
                e.target.style.transform = 'translateY(0)';
                e.target.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
              }}
            >
              <div style={{ fontWeight: 'bold' }}>{route.name}</div>
              <div style={{ fontSize: '12px', opacity: 0.8 }}>{route.component}</div>
            </button>
          ))}
        </div>
      </div>

      {/* 技术说明 */}
      <div style={{ 
        padding: '20px',
        backgroundColor: 'white',
        borderRadius: '12px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <h2 style={{ color: '#1890ff', marginBottom: '16px' }}>📋 技术实现说明</h2>
        
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <div>
            <h3 style={{ color: '#52c41a', marginBottom: '12px' }}>✅ 已实现功能</h3>
            <ul style={{ marginLeft: '20px', lineHeight: '1.8', color: '#333' }}>
              <li>基于 react-i18next 的国际化框架</li>
              <li>支持中文、英文、日文、韩文四种语言</li>
              <li>语言选择器组件 (右上角下拉菜单)</li>
              <li>语言偏好持久化 (localStorage)</li>
              <li>页面间语言状态同步</li>
              <li>完整的登录/注册页面国际化</li>
              <li>后台管理系统菜单国际化</li>
              <li>响应式设计和暗色主题适配</li>
            </ul>
          </div>
          
          <div>
            <h3 style={{ color: '#fa541c', marginBottom: '12px' }}>🚧 可扩展功能</h3>
            <ul style={{ marginLeft: '20px', lineHeight: '1.8', color: '#333' }}>
              <li>更多页面的国际化支持</li>
              <li>动态语言包加载</li>
              <li>RTL (从右到左) 语言支持</li>
              <li>数字、日期、货币格式本地化</li>
              <li>图片和资源的本地化</li>
              <li>SEO友好的多语言URL</li>
              <li>翻译管理后台</li>
              <li>自动语言检测</li>
            </ul>
          </div>
        </div>

        <div style={{ 
          marginTop: '20px', 
          padding: '16px', 
          backgroundColor: '#f0f8ff', 
          borderRadius: '8px',
          border: '1px solid #d9d9d9'
        }}>
          <h4 style={{ color: '#1890ff', marginBottom: '8px' }}>🎯 使用方法</h4>
          <ol style={{ marginLeft: '20px', lineHeight: '1.8', color: '#333' }}>
            <li>点击右上角语言选择器切换语言</li>
            <li>访问不同页面验证语言同步</li>
            <li>刷新页面验证语言偏好持久化</li>
            <li>在新标签页打开页面验证跨标签同步</li>
          </ol>
        </div>
      </div>
    </div>
  );
};

export default GlobalI18nTest; 